<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>main</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/time.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
	<div class="container">
		<%@ include file="include/top.jsp" %>
	<!--header end-->
		<div class="content">
			<div class="row">
				<div class="span9">
					<div class="think">
						<span><i class="icon-eye-open"></i>你在想什么?</span>
						<div>
							<form action="" id="fm" autocomplete="off">
							<textarea rows="3" style="width:70%" class="message" maxlength="140"></textarea>
							<span id="msgnull" style="display:inline;color:red;font-size:12px;font-weight:normal"></span><br/>
							<span id="msg" style="display:inline;color:red;font-size:12px;font-weight:normal">输入字符在140个之内，当无法输入时，已经超过了最大限制数量</span><br/>
							<input type="button" class="btn btn-info fb" value="发表" />
							</form>
						</div>
					</div>
					<div class="stream">
						<span><i class="icon-retweet"></i>信息流</span>
						<!-- 显示最新动态信息 -->
						<div class="stream-content">
						<c:forEach items="${messageList}" var="message">
						<div class="media medias" >
						  <a class="pull-left" href="#">
						    <img class="media-object" data-src="holder.js/64x64">
						  </a>
						  <div class="media-body">
						    <h5 class="media-heading">${message.employee.name}</h5>
						    <div class="media">
						      ${message.messageContent}
						    </div>
						    <div>
						     <small title="${message.messageCreatetime}" id="${message.id}" style="color:#999" >
						     <script type="text/javascript">
						     	var endtime = getNow();
								var starttime = '${message.messageCreatetime}';
								var id='${message.id}';
								var diftime = getTimeDif(starttime,endtime);
								$("#"+id).text(diftime);
						     </script>
						     </small>
						     <div class="pull-right" style="font-size:12px;display:none" >
						     <a>评论</a> &nbsp;
						     <a>转发</a> &nbsp;
						     <a>修改</a> &nbsp;
						     <a>删除</a>
						     </div>
						    </div>
						  </div>
						</div>
						</c:forEach>
						<c:if test="${empty messageList }">
							<span style="font-size:12px;color:red">还没有发表过动态</span>
						</c:if>
						</div>
					</div>
				</div>
				<div class="span3">
					<div class="task">
				      <span><i class="icon-th"></i>我的任务</span>
					  <ul>
					  	<c:forEach items="${sessionScope.list }" var="task">
					  		<li><a>${task.name }（${task.level}）</a></li>
					  	</c:forEach>
					  	<c:if test="${empty list }">
					  		<li><a>你还没有任务！</a></li>
					  	</c:if>
					  </ul>
					</div>
					<div class="task">
				      <span><i class=" icon-volume-up"></i>最新消息</span>
				       <ul>
						<li>你有<span style="display:inline;font-size:13px;color:red" id="countnum"></span >&nbsp;条@消息，<a  id="news">点击查看</a></li>
					  </ul>
					</div>
				</div>
			</div>
		</div>
		<!--container end-->
		<div class="footer">
			<p>Copyright © 2013 xxx版权所有</p>
		</div>
		<!--footer end-->
	</div>
	<script type="text/template" id="template">
		<div class="media medias" >
			<a class="pull-left" href="#">
			<img class="media-object" data-src="holder.js/64x64">
			</a>
			<div class="media-body">
			 <h5 class="media-heading">{{messagePub}}</h5>
			<div class="media">
			{{messageContent}}
			 </div>
			<div>
			<small title="{{messageCreatetime}}" id="{{id}}" style="color:#999"></small>
			<div class="pull-right" style="font-size:12px;display:none">
			<a>评论</a> &nbsp;
			<a>转发</a> &nbsp;
			<a>修改</a> &nbsp;
		    <a>删除</a>
			</div>
			</div>
		 </div>
		</div>
	</script>
	<script type="text/javascript" src="js/jquery.atwho.min.js"></script>
	<script type="text/javascript" src="js/at.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
	   //@所有雇员的名字
		var names = [];
		<c:forEach items="${employeeList}" var="employee">
			names.push('${employee.name}');
		</c:forEach>
		
		
		$(function(){
			//点击按钮时的事件
			$(".fb").click(function(){
				var message = $(".message").val();
				if(!message){//输入框的值为空
					$("#msgnull").text("不能为空");
				}else{
					$.post("addmessage.jspx",{message:message},function(result){
						$(".stream-content").html("");
						$(result).each(function(){
							var id = this.id;
							var messagePub = this.employee.name;
							var messageContent = this.messageContent;
							var messageCreatetime = this.messageCreatetime;
							var template =$("#template").html();
							template = template.replace(/{{messagePub}}/g,messagePub).replace(/{{messageContent}}/g,messageContent).replace(/{{messageCreatetime}}/g,messageCreatetime).replace(/{{id}}/g,id);
							$(".stream-content").append(template);
							var endtime = getNow();
							var diftime = getTimeDif(messageCreatetime,endtime);
							$("#"+id).text(diftime);
						});
					});
					
					$(".message").val("");
				}
			});
			
			$(".message").keydown(function(){
				$("#msgnull").hide(); //键按下时空提示消失
			});
			
		
			//最新消息显示有几条@
			function news(){
				$.get("showatmessagecount.jspx",function(result){
					if(result ==0){ 
						$("#news").hide(); //当有0条消息时，点击查看隐藏
					}else{
						$("#news").show();
					}
					$("#countnum").text("");
					$("#countnum").text(result);
				});
			}
			news(); //页面加载时调用一次
			window.setInterval(news, 10000);//每隔10m调用一次
			
			//显示@消息的内容
			$("#news").click(function(){
				$.get("showatmessage.jspx",function(result){
					$(".stream-content").html("");
					$("#countnum").text("0"); //点击查看消息后，@消息为0条，点击查看也不管用
					$("#news").hide();//点击查看隐藏
					
					$(result).each(function(){
							var id = this.id;
							var messagePub = this.employee.name;
							var messageContent = this.messageContent;
							var messageCreatetime = this.messageCreatetime;
							var template =$("#template").html();
							template = template.replace(/{{messagePub}}/g,messagePub).replace(/{{messageContent}}/g,messageContent).replace(/{{messageCreatetime}}/g,messageCreatetime).replace(/{{id}}/g,id);
							$(".stream-content").append(template);
							var endtime = getNow();
							var diftime = getTimeDif(messageCreatetime,endtime);
							$("#"+id).text(diftime);
					});
				});
			});
			
		});
		
	</script>
</body>
</html>